<template>
  <view class="contract uni-flex-column">
    <scroll-view scroll-y class="bill-list">
      <!-- 月份分组 -->
      <view class="month-section" v-for="(monthData, monthIndex) in billData" :key="monthIndex">
        <!-- 月份标题栏（含收支统计） -->
        <!-- 新增collapsed-class动态控制边框 -->
        <view class="month-title" 
              @click="toggleMonth(monthIndex)"
              :class="{ 'collapsed': !monthData.expanded }">
          <view class="month-header">
            <text class="month-text">{{ monthData.month }}</text>
             <view class="arrow-icon" :class="{ 'arrow-up': monthData.expanded }"></view>
          </view>
          <view class="month-stats">
            <text class="stat-item">支出：¥{{ monthData.expense }}</text>
            <text class="stat-item">收入：¥{{ monthData.income }}</text>
          </view>
        </view>
        <!-- 账单列表（添加折叠动画） -->
        <view class="bill-content" :class="{ 'collapsed': !monthData.expanded }">
          <view class="bill-item" v-for="(bill, index) in monthData.bills" :key="index">
            <!-- 左侧：图标 + 信息 -->
            <view class="bill-left">
              <image class="bill-icon" :src="bill.icon" mode="widthFix"></image>
              <view class="bill-info">
                <view class="bill-description">
                  {{ bill.description }}
                </view>
                <view class="bill-date">{{ bill.date }}</view>
              </view>
            </view>
            <!-- 右侧：金额 -->
            <view class="bill-amount" :class="{ income: bill.amount.startsWith('+') }">
              {{ bill.amount }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';


// 初始化账单数据，添加expanded字段控制折叠状态
const billData = ref([
  {
    month: '4月',
    expense: '2390.33',
    income: '2390.33',
    expanded: true, // 默认展开
    bills: [
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称长的名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon2.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      }
    ]
  },
  {
    month: '3月',
    expense: '2390.33',
    income: '2390.33',
    expanded: true, // 默认展开
    bills: [
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称长的名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon2.png' 
      },
      { 
        date: '2024-02-23 12:23', 
        description: '交易商品名称', 
        amount: '+33.00',
        icon: 'https://example.com/icon1.png' 
      }
    ]
  }
]);

// 切换月份折叠状态
const toggleMonth = (index) => {
  billData.value[index].expanded = !billData.value[index].expanded;
};
</script>

<style scoped lang="scss">
.contract {
  height: 100vh;
  background: #F5F5F5;
  padding: 15rpx;
  box-sizing: border-box;
}

/* 滚动容器 */
.bill-list {
  flex: 1;
}

/* 月份分组 */
.month-section {
  margin-bottom: 10rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  border: 1rpx solid #f0f0f0;
  padding: 15rpx;
  box-sizing: border-box;
}

/* 月份标题栏 */
.month-title {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 15rpx;
  flex-direction: column;
  position: relative;
  margin-bottom: 10rpx;
  height: 133rpx;
  
  /* 添加点击效果 */
  &:active {
    opacity: 0.7;
  }
  
  /* 默认显示下边框 */
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 15rpx;
    right: 15rpx;
    height: 1rpx;
    background-color: #f0f0f0;
    transition: opacity 0.3s ease;
  }
  
  /* 折叠状态隐藏下边框 */
  &.collapsed::after {
    opacity: 0;
    display: none;
  }
}

.month-header {
  display: flex;
  align-items: center;
}

.month-text {
  font-weight: 500;
  font-size: 30rpx;
  color: #303133;
}

/* 箭头图标样式 - 自定义倒三角 */
.arrow-icon {
  width: 0;
  height: 0;
  border-left: 8rpx solid transparent;  // 透明
  border-right: 8rpx solid transparent; // 透明
  border-top: 12rpx solid #999;         // 实色
  transition: transform 0.3s ease;
  margin-left: 10rpx;
  
  &.arrow-up {
    transform: rotate(180deg);
  }
}

.month-stats {
  display: flex;
  gap: 15rpx;
  font-size: 24rpx;
  color: #666;
}

/* 账单内容区域（添加折叠动画） */
.bill-content {
  overflow: hidden;
  transition: all 0.3s ease;
  max-height: 2000px; /* 设置一个足够大的值 */
  
  &.collapsed {
    max-height: 0;
    opacity: 0;
  }
}

/* 账单条目 */
.bill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 10rpx 15rpx;
  position: relative;
}

/* 账单条目分割线 */
.bill-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15rpx;
  right: 15rpx;
  height: 1rpx;
  background-color: #f0f0f0;
}

/* 最后一个账单条目不显示分割线 */
.bill-content .bill-item:last-child::after {
  display: none;
}

/* 左侧内容（图标 + 信息） */
.bill-left {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.bill-icon {
  width: 28rpx; 
  height: 28rpx; 
  border-radius: 4rpx;
}

.bill-info {
  flex: 1;
  height: 90rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bill-date {
  font-size: 22rpx;
  color: #999;
  margin-bottom: 2rpx;
  font-weight: 400;
}

.bill-description {
  font-size: 28rpx;
  color: #303133;
  font-weight: 400;
}

/* 金额（区分收入/支出） */
.bill-amount {
  font-size: 28rpx;
  color: #F53F3F; /* 支出默认红色 */
  min-width: 60rpx;
  text-align: right;
}

/* 收入样式 */
.bill-amount.income {
  font-size: 28rpx;
  color: #303133;
  font-weight: normal;
}
</style>